<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        1.普通的文本框：例如text、password、textarea、select等等，使用v-model，value可写可不写,初始值设置为字符串即可
        2.单选框：radio，使用v-model，同时必须配置value属性值，因为它不能输入，只能人为设定
        3.多选框：checkbox，使用v-model，
            1):不配置value属性，收集的是checked属性，是布尔值
            2):写了value属性：如果v-model初始值是非数组，也是布尔值；如果v-model初始值是数组，那么收集的是value组成的数组；
        4.三个事件修饰符：
            1):lazy：当失去焦点时，在收集数据
            2):number：将输入的字符串转换为数字，搭配type="number"使用
            3):trim：去除输入的首尾的空格，中间的不能去除
         
     -->
    <div id="root">
        <!-- 对于表单form，这里不能用@click了 -->
        <!-- 阻止表单的默认行为，使用事件修饰符prevent，这样就不会提交数据，页面也不会刷新 -->
        <form @submit.prevent="getUserInfo">
            账号：<input type="text" v-model="account"> <br><br>
            密码：<input type="password" v-model="password"> <br><br>
            <!-- 把数据转化为数值型 -->
            年龄：<input type="number" v-model.number="age"> <br><br>
            性别：
            男<input type="radio" name="sex" v-model="sex" value="male">
            女<input type="radio" name="sex" v-model="sex" value="female"> <br><br>
            爱好：
            学习<input type="checkbox" v-model="hobby" value="study">
            打游戏<input type="checkbox" v-model="hobby" value="game">
            吃饭<input type="checkbox" v-model="hobby" value="eat">
            <br><br>
            校区：
            <select v-model="city">
                <option value="">请选择校区</option>
                <option value="beijing">北京校区</option>
                <option value="shanghai">上海校区</option>
                <option value="shenzhen">深圳校区</option>
                <option value="wuhan">武汉校区</option>
            </select>
            <br><br>
            其它信息：
            <textarea v-model.lazy="other"></textarea> <br><br>
            <!-- 由于只需要勾选或不勾选，所以初始值可以设置为字符串，即收集布尔值 -->
            <input type="checkbox" v-model="agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
            <br><br>
            <button>提交</button>

        </form>
    </div>

    <script>
        Vue.config.productionTip = false;

        // 第一种方法,通过vm实例
        // #region
        const vm = new Vue({
            el: "#root",
            data: {
                account: "",
                password: '',
                sex: '',
                hobby: [],
                city: '',
                other: '',
                agree: '',
                age: 10
            },
            methods: {
                getUserInfo() {
                    // 通过vm实例的_data将数据获取出来，这是第一种方法
                    console.log(JSON.stringify(vm._data));
                }
            }
        });
        // #endregion


        // 第二种方法,将各个属性封装到一个对象中，那么在模板中相应的属性也要修改了
        // #region
        // new Vue({
        //     el: "#root",
        //     data: {
        //         userInfo: {
        //             account: "",
        //             password: '',
        //             sex: '',
        //             hobby: [],
        //             city: '',
        //             other: '',
        //             agree: '',
        //         }
        //     },
        //     methods: {
        //         getUserInfo() {
        //             // 之前的所有属性都要修改，例如userInfo.account,userInfo.password,userInfo.sex等等
        //             console.log(JSON.stringify(this.userInfo));
        //         }
        //     }
        // });
        // #endregion

    </script>
</body>
</html>